<template>
  <div class="container">
    <div>已完成{{ isComplete }} / 全部{{ list.length }}</div>
    <div>
      <button class="btn" @click="clearCompleted">删除已完成</button>
    </div>
    <button @click="gotoAbout">跳转</button>
  </div>
</template>

<script>
import { defineComponent, ref, computed } from 'vue'
import { useRouter } from 'vue-router'

export default defineComponent({
  name: 'NavFooter',
  props: {
    list: {
      type: Array,
      required: true
    }
  },
  setup (props, ctx) {
    const isComplete = computed(() => {
      // 过滤已完成的
      const arr = props.list.filter(item => {
        return item.complete
      })
      return arr.length
    })

    const clearCompleted = () => {
      console.log('clear')
      // 过滤未完成的
      const arr = props.list.filter(item => {
        return item.complete === false
      })
      ctx.emit('clear', arr)
    }

    const name = ref('zhangsan')
    const num = ref(14)
    const obj = ref({
      name: 'lisi',
      num: '20',
      msg: 'hello message'
    })

    // router是全局路由对象
    const router = useRouter()
    const gotoAbout = () => {
      // 可以直接传入跳转的路径
      // router.push('/about')
      // 也可以传对象（附加参数）
      router.push({
        path: '/about',
        // query传参 path和name都可以
        // query: {
        //   name: name.value,
        //   num: num.value,
        //   obj: JSON.stringify(obj)
        // },
        // params传参只能用name属性
        name: 'About',
        params: {
          name: name.value,
          num: num.value,
          obj: JSON.stringify(obj.value)
        }
      })
    }

    // back：回到上一页
    // forward：去到下一页
    // go(1/-1) 前进和后退

    return {
      isComplete,
      clearCompleted,
      gotoAbout
    }
  }
})
</script>

<style scoped>
.container {
  display: flex;
  align-items: center;
}

.btn {
  margin-left: 10px;
}
</style>
